<template>
  <div class="row-item">
        <div class="tab-type">
          {{title}}
        </div>
        <div class="item-list">
          <div class="tab-item"
          v-for="i in item"
          :key="i[0]"
          @click="changeType(i[0])"
          :class="{active:activeId==i[0]}"
          >
            {{i[1]}}
          </div>
        </div>
    </div> 
</template>

<script>
import bus from "assets/playerBus"
export default {
    props:['title','item','activeId'],
    data(){
      return{
        activeNum:''
      }
    },
    methods:{
      changeType(id){
        bus.$emit('changeActive',{id})
        this.$emit('showMenu')
        this.$router.push(`/albums/${id}`)
        //this.$emit('changeType',{id})
      }
    }
}
</script>

<style lang="stylus" scoped>
.row-item 
      padding-left 1rem
      position relative
      margin 0 0 .1rem 
      background #fff
      color #3d3d3d
      font-size .14rem
      display flex
      .tab-type
        position absolute
        left 0
        width 1rem
        height 100%
        color #757575
        font-size .16rem
        display flex
        flex-direction column
        justify-content center
        align-items center
      &:nth-of-type(3) .tab-type:before
        content ""
        display block
        width .36rem
        height .36rem
        background-image url("https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png")
        background-position 0 -1.08rem
        background-size 2.62rem 2.34rem
        background-repeat no-repeat
      &:nth-of-type(4) .tab-type:before
        content ""
        display block
        width .36rem
        height .36rem
        background-image url("https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png")
        background-position -0.38rem -1.08rem
        background-size 2.62rem 2.34rem
        background-repeat no-repeat
      &:nth-of-type(5) .tab-type:before
        content ""
        display block
        width .36rem
        height .36rem
        background-image url("https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png")
        background-position -0.76rem -1.08rem
        background-size 2.62rem 2.34rem
        background-repeat no-repeat
      .item-list
        flex 1
        display flex
        flex-wrap wrap
        .tab-item
          width 50%
          height .46rem
          border 1px solid #e1e1e1
          line-height .46rem
          text-align center
          border-top none
          position relative
          &.active
            font-weight 700
            &:after
              content ""
              display block
              position absolute
              left -0.01rem
              right -0.01rem
              top -0.01rem
              bottom -0.01rem
              border 1px solid #3d3d3d
              z-index 2
        .tab-item:nth-child(even)
          border-right 0
          border-left 0
        .tab-item:last-child
          border-bottom 0

</style>